<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>生命周期</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script src="./js/dayjs.min.js"></script>
    <style>
        body {
            padding: 10px;
        }

        input {
            margin: 5px;
        }
    </style>
</head>
<div id="root">
    <h2 :style="{opacity}">{{name}}</h2>
    <hr v-pre>
    <div>当前的值是{{n}}</div>
    <div><button @click="add">add</button></div>
    <div><button @click="bye">bye</button></div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: '#root',
        // template:`
        //     <div>
        //         <h2 :style="{opacity}">{{name}}</h2>
        //         <hr v-pre>
        //     </div>
        //         `,
        data: {
            name: '培立优',
            time: 1696490760633,
            opacity: 1,
            n: 1,
            timer: 0,
        },
        //#region 
        computed: {
            fmtTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            changeOpacity() {
                this.timer = setInterval(() => {
                    this.opacity -= 0.01;
                    if (this.opacity < 0) {
                        this.opacity = 1;
                    }
                }, 50);
            },
            add(){
                this.n++;
            },
            bye(){
                this.$destroy();
            }
        },
        beforeCreate() {
            console.log('beforeCreate');
        },
        created() {
            console.log('created');
        },
        beforeMount() {
            // 此处对dom操作不生效
            console.log('beforeMount');
        },
        
        //#region 局部过滤器
        filters: {
            timeFormater(val, fmt = 'YYYY-MM-DD HH:mm:ss') {
                return dayjs(val).format(fmt)
            },
        },
        //#endregion
        //#region 自定义指令 这里的this 都是window
        directives: {
        }
        //#endregion
        ,
        mounted() {
            // 页面呈现的是经过vue编译的dom，此处对dom操作生效
            // 一般在此开启定时器、发送网络请求、订阅消息、绑定自定义事件等
            this.changeOpacity();
            console.log('mounted');
        },
        beforeUpdate() {
            console.log('beforeUpdate');
        },
        updated() {
            console.log('updated');
        },
        beforeDestroy() {
            clearInterval(this.timer)
            console.log('beforeDestroy');
        },
        destroyed() {
            console.log('destroyed');
        },
    });
</script>

</html>